<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
    <th:block th:include="include :: header('历史任务')" />
    <th:block th:include="include :: layout-latest-css" />
	<th:block th:include="include :: datetimepicker-css" />
	<th:block th:include="include :: select2-css" />
	<style>
		.hisTask{
			border-radius: 5px;
			margin-top: 5px;
		}
		.hisTask_title1{
			border-bottom: 1px solid grey;
			background-color: #DDDDDD;
			padding: 5px;
		}
		.hisTask_conyent{
			background-color: white;
			padding: 10px;
		}

		.download-file{
			margin-right: 4px;
			line-height: 30px;
			cursor: pointer;
			color: #17a2b8;
		}
		.a-file{
			margin-right: 26px;
			line-height: 30px;
		}
		.file-div{
			background: aliceblue;
			text-align: right;
			font-size: 14px;
			line-height: 30px;
			margin-bottom: 3px;
			width: 84%;
			align-self: flex-end;
		}
	</style>
</head>
<body class="gray-bg">
	<div class="wrapper wrapper-content animated fadeInRight ibox-content" style="background-color: #f3f3f4;">
		<form class="m">

			<input type="hidden" id="instanceId" th:value="${instanceId}">

			<div id="ibox-content">
				<div id="vertical-timeline" class="vertical-container light-timeline">
					<div class="vertical-timeline-block hisTask" th:each="tk:${hisTaskVOS}" th:id="${tk.taskId}">
						<div class="vertical-timeline-icon navy-bg">
							<!--<i class="fa fa-briefcase"></i>-->
							<img style="width: 34px;" th:src="${tk.avatar}" class="img-circle" alt="User Image">
						</div>

						<div class="vertical-timeline-content">
							<h2 th:text="${tk.taskName + '节点'}"></h2>
							<a href="javascript:void(0)" th:onclick="showForm([[${tk.taskId}]])" class="btn btn-sm btn-primary"> 详情</a>
							<span class="vertical-date">
								<span th:text="${tk.assigneeName+'（'+tk.assignee+'）'}"></span>
								<br>
								<small th:text="${#dates.format(tk.endTime, 'yyyy-MM-dd HH:mm')}"></small>
							</span>
							<div class="hisTask_conyent" style="clear: both; display: none" th:utext="${tk.formContent}"></div>
						</div>
					</div>
				</div>
			</div>




			<!--<div class="hisTask" th:each="tk:${hisTaskVOS}" th:id="${tk.taskId}">
				<div class="hisTask_title1" th:text="${tk.assignee}"></div>
				<div class="hisTask_title1" th:text="${#dates.format(tk.endTime, 'yyyy-MM-dd HH:mm')}"></div>
				<div class="hisTask_conyent" th:utext="${tk.formContent}"></div>
			</div>-->
		</form>
	</div>
<th:block th:include="include :: footer" />
<th:block th:include="include :: datetimepicker-js" />
<th:block th:include="include :: layout-latest-js" />
<th:block th:include="include :: select2-js" />
<script th:inline="javascript">
var editFlag = [[${@permission.hasPermi('system:role:edit')}]];
var removeFlag = [[${@permission.hasPermi('system:role:remove')}]];
var prefix = ctx + "act/processTask";
/*function submitHandler() {

		$.operate.save(prefix + "/complete", $('#form-instance-add').serialize());

}*/

var laydate;

$(function(){
	initSelect2();
	initDatetime();
	initData();
	initUploadFile();
});

/**
 * 初始化select2组件
 */
function initSelect2(){
	$(".select2").remove();
	$(".drag-item select").removeClass("select2-hidden-accessible");
	$(".drag-item select option").removeAttr("data-select2-id");
	$(".drag-item select").select2();
}

/**
 * 初始化日期组件
 */
function initDatetime(){
	var arr = $(".drag-item");
	layui.use('laydate', function() {
		laydate = layui.laydate;
		for(var i=0 ; i<arr.length ; i++){
			var c = arr[i];
			if(c.dataset.type == "drag_datetime"){
				var reals = $(c).find(".real");
				for(var j=0 ; j<reals.length ; j++){
					laydate.render({
						elem: '#'+$(reals[j]).attr("id"),
						type: 'datetime',
						trigger: 'click'
					});
				}
			}
		}
	});
}

function initData(){
	var instanceId = $("#instanceId").val();
	$.ajax({
		url: "/act/processTask/historyList/"+instanceId,
		post: "GET",
		success: function (res) {
			console.log(res);
			debugger;
			var arr = res.data;
			for (var i=0 ; i<arr.length ; i++){
				var task = arr[i];
				var taskId = task.taskId;
				var taskDiv = $("#"+taskId);
				var variables = task.variableVOList;
				for (var j=0 ; j<variables.length ; j++){
					var currentVatiable = variables[j];

					//附件单独处理
					if(currentVatiable.name=='processFile'){
						var realNames = currentVatiable.value;
						$.ajax({
							url: "/act/processDefinition/getProcessFileByRealNames",
							type: "post",
							async: false,
							data: {"realNames": realNames},
							success: function(res){
								debugger;
								var files = res.data;
								for(var k=0 ; k<files.length ; k++){
									var file = files[k];
									var file_div = $(taskDiv.find("input[name='processFile']").parents(".drag-container")[0]);
									var str =
											'<div class="file-div">'+
												'<span class="a-file">'+file.fileName+'</span>'+
												'<span class="glyphicon glyphicon-save download-file" onclick="downloadFile(\''+file.path+'\',\''+file.fileName+'\')"></span>'+
											'</div>';
									file_div.append(str);
								}
							}
						})

					} else {
						var currentVatiableDiv = taskDiv.find("[name='"+currentVatiable.name+"']");
						if(currentVatiableDiv.length == 1){
							var localName = currentVatiableDiv[0].localName;
							if(localName == "select"){
								currentVatiableDiv.val(currentVatiable.value).trigger("change");
							}else{
								currentVatiableDiv.val(currentVatiable.value);
							}
						}
						currentVatiableDiv.attr("disabled", true);
					}
				}
			}
		}
	})
}

function showForm(taskId){
	$("#"+taskId).find(".hisTask_conyent").toggle(200);
}

function initUploadFile() {
	var inputFile = $("input[type='file']");
	inputFile.hide();
}

function downloadFile(path, fileName){
	window.location.href = ctx + "act/processDefinition/download?path=" + encodeURI(path) +"&fileName=" + fileName;
}
</script>
</body>
</html>